<script setup lang="ts">
import { BASE_ROUTER_URL, DEV } from "@/config/env";
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { loginApi } from "./api/Api";

const dialogVisible = ref(false)
const username = ref(DEV? "admin" : "");
const password = ref(DEV ? "admin@gtinlian" : "")
const qrcode = ref(DEV ? '1234' : '')
const check = ref<any>()
const msg = ref()

const flushAuthenticationCode = ()=>{
    loginApi.flushAuthenticationCode({
                success: (objectUrl: any) => {
                    check.value.src = objectUrl;
                }
            });
            qrcode.value = ""
}
const keydown = (e: KeyboardEvent) => {
    if (e.key == 'Enter') {
        if (!login()) {
            flushAuthenticationCode();
        }
    }
}

onMounted(() => {
    document.addEventListener("keydown", keydown);
    if(!DEV){
        flushAuthenticationCode();
    }
})

onBeforeUnmount(() => {
    document.removeEventListener("keydown", keydown);
})

const login = () => {
    const check = (key: any) => { return key == null || key.trim() == ""; }
    if (check(username.value) || check(password.value) || check(qrcode.value)) {
        msg.value = check(username.value) ? "请输入账号" : check(password.value) ? "请输入密码" : check(qrcode.value) ? "请输入认证码" : "";
        dialogVisible.value = true;
        return false;
    }
    const body = new FormData()
    body.append("username", username.value);
    body.append("password", password.value);
    body.append("checkCode", qrcode.value);
    loginApi.login({
        body: body,
        success: (data: any) => {
            if (data.status != "success") {
                msg.value = data.msg;
                dialogVisible.value = true;
                flushAuthenticationCode();
            }else{
                location.reload();
            }
        },
        fail: (err: any) => {
            msg.value = "登录失败";
            dialogVisible.value = true;
            flushAuthenticationCode();
        }
    })
    return true;
}

</script>

<template>
    <div id="loginPage" :style="{'background-image': 'url('+BASE_ROUTER_URL+'/RE4wHfl.jpg)'}">
        <div 
        style="background-image: url('icon.png'); 
        background-size: cover;
        width: 150px; height: 150px;
        left: 20px ;top: 20px; position: absolute;"></div>
        <div id="loginBar">
            <div style="height: 200px;">
                <el-form ref="ruleFormRef" style="margin-left: 15px;max-width: 600px; margin-right: 9px; padding-top: 15px;" status-icon
                    label-width="auto" class="demo-ruleForm">
                    <el-form-item label="用户:" prop="pass">
                        <el-input type="text" v-model="username" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密码:" prop="checkPass">
                        <el-input type="password" v-model="password" autocomplete="off" />
                    </el-form-item>
                    <el-form-item v-if="!DEV" label="校验:" prop="age" id="checkAuthenCode" style="margin-top: 15px;">
                        <el-input type="text" v-model="qrcode" style="width: 90px;" />
                        <img ref="check" width="130"
                            style="position: absolute; width: 130px;  left: 98px; cursor: pointer;" 
                            @click="flushAuthenticationCode" 
                        />
                    </el-form-item>
                    <el-form-item style="margin-top: 18px;">
                        <div style="justify-content : center; display: flex;width: 100%;">
                            <el-button type="primary" @click="login">登录</el-button>
                            <el-button>注册</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
    <el-dialog title="提示" v-model="dialogVisible" width="50%" :before-close="() => { dialogVisible = false }">
        <span>{{ msg }}</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
#checkAuthenCode > div > label {
    line-height: 50px;
}
#loginPage {
    width: 100%;
    height: 100%;

}

#loginBar {
    width: 35%;
    max-width: 360px;
    min-width: 300px;
    height: 100%;
    background-color: #e8e8e829;
    position: absolute;
    right: 0px;
    border-radius: 9px;

}

#loginBar>div {
    margin-top: calc(100% - 90px);
    height: 180px;
    width: 100%;
    background-color: rgba(135, 135, 135, 0.459);
    border-radius: 9px;
}

.el-form-item {
    margin-bottom: 10px;
}

#qrcode {
    width: 90px;
    height: 120%;
    background-color: rgba(98, 97, 97, 0.577);
    margin-left: 10px;
}
</style>